<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<!--指定区域-->
<div id="app">
<!--    需求：实现数据自增操作
语法：v-on:click="函数/直接计算"-->
    <h3>数值：{{num}}</h3>
    <br/>
    <button v-on:click="num++">自己增加</button>
    <button @click="num++">自增加简化</button>
    <button @click="addNum(100)">计算</button>
    <button @click="unaddNum2(100)">自己减法</button>

</div>
<script src="../js/vue.js"></script>
<!--3.创建Vue语法-->
<script>
    const APP = new Vue({
        //1.指定区域：
        el: "#app",
        //定义属性
        // 达到自增的效果
        data: {
            num:100,
        },

        methods:{
            //左边是key右边是value
            // 左边写方法名右边写方法体,调用自己的方法要用this
            addNum:function (){
                this.num++
            },

            //方法简化 Js脚本支持
            unaddNum2(){
                this.num--
            }

        }
    })


</script>
</body>
</html>